import React, { useState, useEffect } from "react"
import { Modal, Table, Space, Divider, Radio ,Tag} from 'antd'
import { connect } from "react-redux"
import "./index.css"
import axios from "axios"
// 获取地图对象方法
var BMap = window.BMap;
// 保存地图实例
var mabs = null
var myGeos = null

const CkeckAmdin = (props) => {
    //解构
    const { commanderAdminList } = props
    //编辑弹框状态
    const [isModalVisibles, setIsModalVisibles] = useState(false);
    const [name, setname] = useState("")
    const [key, setkey] = useState([])
    const [img, setimg] = useState("")
    const [tel, settel] = useState("")
    const [city, setcity] = useState("")
    const [ziti, setziti] = useState("")
    const [tuanpei, settuanpei] = useState("")
    const [sname, setsname] = useState("")
    const [lls, setlls] = useState("")
    const [shentime, setshentime] = useState("")
    const [id, setId] = useState("")
    const [isModalVisible3, setIsModalVisible3] = useState(false)
    const [checkItem, setCheckItem] = useState({})
    let show = false
    useEffect(() => {
        initMaps()
    }, [mabs, myGeos]) //依赖

    const initMaps = (ziti) => {
        // 获取地图对象方法
        // var BMap = window.BMap;
        // // 保存地图实例  containers位置
        mabs = new BMap.Map("containers");
        //  创建地址解析器实例
        myGeos = new BMap.Geocoder();

        // 初始化地图  第一个参数 要解析的地址 第二个参数是已当前解析地址经纬度为参数的回调函数 第三个参数 当前所在地址
        /// 将地址解析结果显示在地图上，并调整地图视野
        myGeos.getPoint(ziti, (point) => {
            if (point) {
                // 初始化当前城市所在地图区域 
                mabs.centerAndZoom(point, 11);
            }
        }, ziti)
    }
    useEffect(() => {
        //默认调用团长管理渲染函数
        getlist()
    }, [])
    //团长管理请求数据函数
    const getlist = () => {
        //团长管理接口
        axios.get("/colonel").then(res => {
            props.dispatch({
                type: "COMMANDER_LIST",
                payload: res.data.data
            })
        })
    }
    //编辑数据
    const edit = (item) => {
        //弹框显示
        setIsModalVisibles(true);
        console.log(key, item)
        //数据回显
        setname(item.name)
        setimg(item.img)
        setkey(item.key)
        settel(item.tel)
        setcity(item.city)
        setziti(item.ziti)
        settuanpei(item.tuanpei)
        setsname(item.sname)
        setlls(item.lls)
        setshentime(item.shentime)
        setId(item.id)
        //本地存储当前编辑的自提地点位置
        localStorage.setItem("cityCommanderAdmin", item.shentime);
        show = !show

        initMaps(item.ziti)//初始化地图 并传递参数
    }
    //编辑的确定按钮事件
    const handleOks = () => {
        //手机格式验证
        if (name === "" || !/^1[3-9]\d{9}$/.test(tel)) {
            alert("手机号输入不符合验证规则")
        } else {
            props.dispatch({
                type: "EDIT_COMMANDERADMIN_LIST",
                payload: { name, tel, city, ziti, tuanpei, sname, lls, shentime, id }
            })
            //弹框关闭
            setIsModalVisibles(false);
        }
    };
    //编辑的取消按钮事件
    const handleCancels = () => {
        setIsModalVisibles(false);
    };
    //表格数据整理配置
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: "center"
        },
        {
            title: '头像',
            key: 'img',
            align: "center",
            render: (text, record) => (
                <img className='img' src={record.img} alt="" />
            ),
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: "center"
        },
        {
            title: '手机号',
            dataIndex: 'tel',
            key: 'tel',
            align: "center"
        },
        {
            title: '所属城市',
            dataIndex: 'city',
            key: 'city',
            align: "center"
        },
        {
            title: '自提点信息',
            dataIndex: 'ziti',
            key: 'ziti',
            align: "center"
        },
        {
            title: '团长配送费',
            dataIndex: 'tuanpei',
            key: 'tuanpei',
            align: "center"
        },
        {
            title: '审核人名',
            dataIndex: 'sname',
            key: 'sname',
            align: "center"
        },
        {
            title: '申请时间',
            dataIndex: 'shentime',
            key: 'shentime',
            align: "center"
        },
        {
            title: '团长状态',
            dataIndex: 'lls',
            key: 'lls',
            align: "center",
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <span style={{color:"orange"}} onClick={() => { edit(record) }}>编辑</span>
                    <span onClick={() => { shop(record) }}>绑定商品</span>
                    <span style={{color:'turquoise'}} onClick={() => { look(record) }}>查看核销员</span>
                </Space>
            )
        }
    ];
    //分页
    const [pagination, setPagination] = useState({ current: 1, pageSize: 4 })
    const [pagination2, setPagination2] = useState({ current: 1, pageSize: 1 })
    //表格页脚改变
    const handleTableChange = (pagination) => {
        setPagination(pagination)
    }
    //弹框里面分页
    const handleTableChange2 = (pagination2) => {
        setPagination2(pagination2)
    }

    //查看核销员弹框状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    //查看核销员弹框
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //查看核销员数据
    const look = (item) => {
        //调用弹框显示
        setIsModalVisible(true);
        //图片
        setimg(item.img)
        //团员名称
        setname(item.name)
        //团员手机号
        settel(item.tel)
    }

    //绑定商品
    const shop = (item) => {
        //调用弹框显示函数
        setIsModalVisible3(true);
    }
    //绑定商品弹框确定事件
    const handleOk3 = () => {
        console.log(checkItem)
        //判断是否选中
        if (checkItem) {
            //将选中的数据存到该团长的商品数据里面
            props.dispatch({
                type: "ADD_COMMANDERADMIN_LIST",
                payload: checkItem
            })
        } else {
            //将之前选中的数据从该团长商品数据里面删除
            props.dispatch({
                type: "DEL_COMMANDERADMIN_LIST",
            })
        }
        setIsModalVisible3(false);
    };
    const handleCancel3 = () => {
        setIsModalVisible3(false);
    };
    //绑定商品弹框里面的数据
    const columns2 = [
        {
            title: '图片',
            dataIndex: 'img',
            render: (text, record) => (
                <img className='img' src={record.img} alt="" />
            ),
        },
        {
            title: '商品名称',
            dataIndex: 'shopname',
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
    ];
    const [selectionType, setSelectionType] = useState('checkbox');
    //绑定商品弹框里面的数据
    const data = [
        {
            key: '1',
            img: 'https://img1.baidu.com/it/u=2726407868,3122834122&fm=26&fmt=auto',
            shopname: '酱油',
            price: '￥8.8',
        },
        {
            key: '2',
            img: 'https://img0.baidu.com/it/u=1178605058,2529692293&fm=26&fmt=auto&gp=0.jpg',
            shopname: '橙汁',
            price: '￥5',
        }
    ];
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            //选中的那项数据
            console.log(selectedRows[0]);
            //对是否选中的那项进行赋值
            setCheckItem(selectedRows[0]);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        })
    }
    //搜索
    const [value, setValue] = useState("")
    //监听 更新value值变化
    const changeValue = (e) => {
        setValue(e.target.value)
    }
    //搜索事件
    const search = () => {
        axios(`/colonelsearch/?name=${value}`).then(res => {
            // console.log(res)
            props.dispatch({
                type: "SEARCH_COMMANDERAMDIN_LIST",
                payload: res.data.data
            })
        })
    }
    //下拉筛选
    const [selectValue, setSelectValue] = useState("")
    //监听下拉筛选事件
    const changeSelectValue = (e) => {
        console.log(e.target.value)
        setSelectValue(e.target.value)
        props.dispatch({
            type: "SELECTVALUE_COMMANDERADMIN",
            payload: { value: e.target.value }
        })
    }
    return <div className='commander'>
        <Modal id="edit" title="编辑"
            visible={isModalVisibles}
            cancelText='取消'
            okText='确定'
            onOk={handleOks}
            onCancel={handleCancels}>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>姓名:</span>
                <input className='ipt' value={name}
                    onChange={e => { setname(e.target.value) }} />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>头像</span>
                <img className='dialogImg' src={img} alt="" />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>电话:</span>
                <input className='ipt'
                    value={tel}
                    onChange={e => { settel(e.target.value) }} />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>所属城市:</span>
                <input className='ipt' value={city}
                    onChange={e => { setcity(e.target.value) }} />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>自提点信息:</span>
                <input className='ipt' value={ziti}
                    onChange={e => { setziti(e.target.value) }} />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>位置:</span>
                <div id="containers" style={{ width: '180px', height: '180px', marginLeft: '110px', marginTop: '10px' }}></div>
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>团装配送费:</span>
                <input className='ipt' value={tuanpei}
                    onChange={e => { settuanpei(e.target.value) }} />
            </li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>审核人名:</span>
                <input className='ipt' value={sname} onChange={e => { setsname(e.target.value) }} /></li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>审核时间:</span>
                <input className='ipt' value={shentime}
                    onChange={e => { setsname(e.target.value) }} /></li>
            <li>
                <span style={{width:'120px',display:'inline-block',textAlign:'center'}}>团长状态:</span>
                <input className='ipt' value={lls}
                    onChange={e => { setlls(e.target.value) }} /></li>
        </Modal >
        {/* 头部 */}
        < div className='commanderHeader'>
            <p>
                <span>审核状态</span>
                <select value={selectValue} onChange={changeSelectValue}>
                    <option value="全部">全部</option>
                    <option value="待审核">待审核</option>
                    <option value="审核通过">审核通过</option>
                    <option value="审核不通过">审核不通过</option>
                </select>
            </p>
            <p>
                <input type="text" value={value} onChange={changeValue} />
                <button onClick={search}>搜索</button>
            </p>
        </div >
        {/* 主体表格 */}
        < div className='commanderBody'>
            <Table
                pagination={pagination}
                onChange={handleTableChange}
                dataSource={commanderAdminList}
                columns={columns}
                rowKey="id" />
        </div >
        <div className='dialog'>
            {/* 查看核销员弹框 */}
            <Modal className='modals'
                title="查看核销员"
                visible={isModalVisible}
                cancelText='取消'
                okText='确定'
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <p className='p'><span>图片</span><span>团员名称</span><span>团员手机号</span></p>
                <p className='p'><span><img src={img} alt="" /></span><span>{name}</span><span>{tel}</span></p>
            </Modal>
        </div>
        {/* 弹框绑定商品 */}
        <div className='shopDialog'>
            <Modal title="绑定商品"
                visible={isModalVisible3}
                cancelText='取消'
                okText='确定'
                onOk={handleOk3}
                onCancel={handleCancel3}>
                <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);
                    }}
                    value={selectionType}
                >
                </Radio.Group>
                <Divider />
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns2}
                    dataSource={data}
                    pagination={pagination2}
                    onChange={handleTableChange2}
                    rowKey="id"
                />
            </Modal>
        </div>
    </div >
}

export default connect((state) => {
    return {
        commanderAdminList: state.commanderAdminList
    }
})(CkeckAmdin)

